<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>列表渲染</title>
        <!--第一步：安装Vue.js-->
        <script src="./vue.js"></script>
    </head>
    <body>
        <!--第三步：创建HTML模板（根组件）-->
       <div id="app">
         <!--1、基本用法-->
         <li v-for="item in items">
            {{item.name}}
         </li>
         <!--2、获取元素在数组中的索引位置：index，
             语法：（第1个参数，第2个参数）in items,
             第1个参数：要遍历的数组中的元素别名，
             第2个参数：所在数组中的索引位置
        -->
        <li v-for="(index, item) in items">
            {{ index }} - {{ item }}
         </li>
       </div>
       <p class="note">3、对遍历出来的对象进行解构, v-for="({name ,age}, index) in items"</p>
       <template v-for="({name, age}, index) in items">
        {{ index }} - {{ name }} -{{age}}
     </template>

     <p class="note">4、嵌套v-for，如果不想渲染v-for所在标签，可以使用template标签</p>
     <li v-for="(item,index) in items">
        遍历items-{{index}}:
      <div v-for="(value,key,index) in item">
        遍历item:{{index}} = {{value}} - {{key}}
      </div>
   </li>
   <p class = "note">5、v-for 遍历范围值</p>
   <li v-for = "item in 5">
     {{ item }}
   </li>
   场景：实现选择年份的下拉框，年份从当前开始，依次展示最近几年的选项
   <select>
     <option v-for="n in 5" :value="`${2025 - n}`">
        {{2025 - n}}
     </option>
   </select>
   </div>

    </body>
    <script>
        //Vue.createApp({/*根组件选项});
        //选项式API
        //第二步：创建Vue的应用实例
        const app = Vue.createApp({
           data(){//定义所需的状态变量
              return{
                 items: [{name:'Foo'},{name: 'Bar'}],//要遍历的数组
              }
           }
        });
      //第四步：在根元素上挂载应用实例，返回根组件实例对象
      const vm = app.mount("#app");//const app = Vue.createApp({}).mount("#app");
    </script>
</html>